<template>
  <div class="index">
    <el-container>
      <!-- <el-aside style='background-color: #262626;height: 100vh;'> -->
        <!-- 左侧栏 -->
          <el-menu class="el-menu-vertical-demo aside" :collapse-transition='false' :collapse="isCollapse" text-color='#fff;' :router='false' >
            <div class="logo">
              <img src="./../../public/img/logo.png">
              <span v-if="!isCollapse">天择智付</span>
            </div>
            <el-menu-item :index="item.uri + ''" class="menu-item" :class="leftNavIndex == index ? 'is-active' : ''" v-for="(item, index) in leftNav" :key="item.title" @click="leftNavClick(item.uri, index)">
              <i class="el-icon-setting"></i>
              <span slot="title" class="text">{{item.title}}</span>
            </el-menu-item>
          </el-menu>
        <!-- </el-aside> -->
        <el-container class="main-content">
          <!-- 顶部 -->
        <el-header class="header" style="height: 50px;color: #fff;">
          <div class="cut" @click="cut">
            <img src="./../../public/img/cut.png">
          </div>
          <a href='javascript:;'
             class="menu text-center"
             :class='(index == menuActive ? "menuActive" : "")'
             v-for="(item, index) in navList"
             :key="item.title"
             @click="tabNav(index)">
            {{item.title}}
          </a>
          <!-- <form class="input-suffix" autocomplete="off" @submit.prevent="onSubmit" action="https://www.baidu.com">
            <el-input placeholder="请选择订单号或流水号" suffix-icon="el-icon-search" v-model="searchOrder" class="orderSearch" size='small'>
            </el-input>
          </form> -->
          <div class="userInfo">
            <a href="javascript:;"
               class="clean-cache"
               @click="cleanCache">清除缓存</a>
            <el-dropdown>
              <span class="el-dropdown-link">
                <img src="./../../public/img/User-Settings.png">
                <span style="color:#ffffff">管理员</span>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item disabled>{{tel}}</el-dropdown-item>
                <el-dropdown-item @click.native="personalconfig_page">个人资料</el-dropdown-item>
                <el-dropdown-item @click.native="exit">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 主体区 -->
        <el-container class="main-right">
          <el-main class="main-right-content">
            <router-view></router-view>
          </el-main>
          <!-- <el-footer>Footer</el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
export default {
  data () {
    return {
      isCollapse: false,
      defaultActive: sessionStorage.getItem('defaultActive') ? sessionStorage.getItem('defaultActive') : '/',
      searchOrder: '',
      // navList: [{title: '首页'}, {title: '管理员中心'}, {title: '日志管理'}, {title: '商家'}, {title: '订单'}, {title: '数据'}, {title: '监控'}, {title: '分销'}, {title: '佣金'}, {title: '设置'}, {title: '系统'}],
      navList: sessionStorage.getItem('navList') ? JSON.parse(sessionStorage.getItem('navList')) : [],
      menuActive: sessionStorage.getItem('menuActive') ? JSON.parse(sessionStorage.getItem('menuActive')) : 0,
      leftNav: sessionStorage.getItem('leftNav') ? JSON.parse(sessionStorage.getItem('leftNav')) : [],
      leftNavIndex: sessionStorage.getItem('leftNavIndex') ? JSON.parse(sessionStorage.getItem('leftNavIndex')) * 1 : 0,
      // 登录用户手机号
      tel: ''
    };
  },
  created () {
    let that = this;
    console.log(sessionStorage.getItem('leftNavIndex'));
    // 绑定公众号
    if (!this.bindgzh()) {
      return false;
    };
    // 如果已经存在，则不再请求首页数据
    if (!sessionStorage.getItem('cache')) {
      http.post(api.menuList, { token: localStorage.getItem('token') }, (res) => {
        console.log(res);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.navList = res.data;
          that.leftNav = sessionStorage.getItem('leftNav') ? JSON.parse(sessionStorage.getItem('leftNav')) : that.navList[that.leftNavIndex * 1].next;
          // that.leftNav = that.navList[that.leftNavIndex*1].next;
          sessionStorage.setItem('navList', JSON.stringify(that.navList));
          sessionStorage.setItem('leftNav', JSON.stringify(that.leftNav));
          sessionStorage.setItem('cache', 'true');
          // that.$router.push(that.leftNav[0].uri);
          return false;
        };
      }, (err) => {
        console.log(err);
      });
    };
  },
  mounted: function () {
    console.log(sessionStorage.getItem('leftNavIndex'));
    // 获取用户信息
    this.initdata();
  },
  methods: {
    // 侧边栏的显示与隐藏
    cut: function () {
      this.isCollapse = !this.isCollapse;
    },
    // 获取用户信息
    initdata () {
      let that = this;
      http.get(api.userInfo, {
        token: localStorage.getItem('token')
      }, response => {
        if (response.code === '10001') {
          that.tel = response.data[0].result.phone;
        } else {
          that.$message.error(response.msg);
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
      });
    },
    onSubmit: function () {
      console.log(1);
    },
    // 请求数据
    navRequest () {
      let that = this;
      http.post(api.menuList, { token: localStorage.getItem('token') }, (res) => {
        console.log(res);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.navList = res.data;
          that.leftNav = sessionStorage.getItem('leftNav') ? JSON.parse(sessionStorage.getItem('leftNav')) : that.navList[that.leftNavIndex * 1].next;
          // that.leftNav = that.navList[that.leftNavIndex*1].next;
          sessionStorage.setItem('navList', JSON.stringify(that.navList));
          sessionStorage.setItem('leftNav', JSON.stringify(that.leftNav));
          sessionStorage.setItem('cache', 'true');
          return false;
        };
      }, (err) => {
        console.log(err);
      });
    },
    // 切换table卡片
    tabNav (index) {
      // 绑定公众号
      if (!this.bindgzh()) {
        return false;
      };
      this.menuActive = index;
      this.leftNav = this.navList[index].next;
      sessionStorage.setItem('leftNavIndex', 0);
      sessionStorage.setItem('menuActive', index);
      sessionStorage.setItem('leftNav', JSON.stringify(this.leftNav));
      console.log(this.navList[index]);
      try {
        if (this.navList[index].next[0].uri.indexOf('/') < 0) {
          this.$router.push({
            path: '/' + this.navList[index].next[0].uri
          });
        } else {
          this.$router.push({
            path: this.navList[index].next[0].uri
          });
        };
      } catch (error) {
        console.log(error);
        this.$router.push({
          name: '404'
        });
      };
      this.leftNavIndex = 0;
      sessionStorage.setItem('defaultActive', this.navList[index].next[0].uri);
    },
    leftNavClick: function (val, navindex) {
      console.log(navindex);
      // 绑定公众号
      try {
        if (!this.bindgzh()) {
          return false;
        };
        if (val.indexOf('/') < 0) {
          this.$router.push({
            path: '/' + val
          });
        } else {
          this.$router.push({
            path: val
          });
        };
      } catch (error) {
        console.log(error);
        this.$router.push({
          name: '404'
        });
      };
      this.leftNavIndex = navindex;
      sessionStorage.setItem('leftNavIndex', navindex);
      sessionStorage.setItem('defaultActive', val);
    },
    cleanCache: function () {
      this.$confirm('是否清除缓存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // sessionStorage.setItem('menuActive', '');
        // sessionStorage.setItem('navList', '');
        sessionStorage.setItem('cache', '');
        sessionStorage.setItem('userInfo', '');
        this.$message({
          type: 'success',
          message: '清除成功，请刷新页面重新加载!'
        });
        window.location.reload();
      }).catch(() => { });
    },
    exit () {
      localStorage.setItem('token', '');
      sessionStorage.setItem('menuActive', '');
      sessionStorage.setItem('navList', '');
      sessionStorage.setItem('leftNav', '');
      sessionStorage.setItem('cache', '');
      sessionStorage.setItem('userInfo', '');
      this.$router.replace('/');
    },
    personalconfig_page () {
      this.$router.push({
        path: '/personalconfig'
      });
    },
    bindgzh () {
      // 未绑定公众号 进入绑定公众号页面
      let that = this;
      if (!sessionStorage.getItem('userInfo')) {
        http.get(api.userInfo, {
          token: localStorage.getItem('token')
        }, response => {
          if (response.code === '10001') {
            let userinfo = response.data[0].result;
            sessionStorage.setItem('userInfo', JSON.stringify(userinfo));
            if (userinfo.open_id === '' || userinfo.open_id === null) {
              this.$router.push({
                path: '/personalconfig',
                query: {
                  active: 'bindgzh'
                }
              });
              return false;
            }
          }
        }, () => {
          console.log('网络错误');
        });
      } else {
        let userinfo = JSON.parse(sessionStorage.getItem('userInfo'));
        if (userinfo.open_id === '' || userinfo.open_id === null) {
          that.$router.push({
            path: '/personalconfig',
            query: {
              active: 'bindgzh'
            }
          });
          return false;
        }
      }
      return true;
    }
  }
};
</script>

<style lang="stylus" scoped>
.el-menu-item.is-active
  color #fff
  background #36ADCB
.index
  width 100vw
  height 100vh
  .aside
    background #262626
    color #fff
    height 100vh
    border 0
    .menu-item
      height 4rem
      line-height 40px
      padding-left 15px !important
      .el-tooltip
        padding-left 15px
      .text
        color #fff
        min-width 12rem
        display inline-block
    .menu-item:hover>.text
      color #333
    .logo
      display inline-block
      position relative
      padding-left 1.5rem
      padding-right 1.6rem
      box-sizing border-box
      width 100%
      font-size 16px
      height 50px
      line-height 50px
      img
        margin-right 3px
        width 23px
        height 23px
        vertical-align middle
      span
        position relative
        top 2px
  .header
    padding 0
    background #262626
    z-index 10
    font-size 0
    border-bottom 0.5px solid #3B3E40
    .cut
      display inline-block
      width 38px
      line-height 49px
      text-align center
      font-size 14px
      border-left 0.5px solid #3B3E40
      border-right 0.5px solid #3B3E40
      img
        width 13px
        height 10px
        display inline-block
    .menu
      display inline-block
      padding 0 1rem
      line-height 50px
      font-size 14px
      color #fff
      position relative
    .menuActive
      color #36ADCB
      background #101010
    .menu:hover
      color #36ADCB
      background #101010
    .input-suffix
      display inline-block
      margin-left 15px
      .orderSearch:hover
        width 300px
    .userInfo
      display inline-block
      float right
      margin-right 15px
      height 50px
      line-height 50px
      img
        height 25px
        width 25px
        vertical-align middle
      .clean-cache
        font-size 14px
        color #ffffff
        margin-right 10px
  .main-content
    height 100vh
    .main-right
      background #EBEDF1
      position relative
      height 100vh
      .main-right-content
        padding 15px
</style>
